<script setup>
import { RouterLink, RouterView } from "vue-router";
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useOrganisationUserStore } from "../../stores/organisationUser";
import { useAppUserStore } from "../../stores/appUser";
import * as dynamicCommponents from "../../components/Components/index.js";

const store = useOrganisationUserStore();
const appUserStore = useAppUserStore();
const router = useRouter();
const route = useRoute();
const loading = ref(false);

const thirdPartToken = computed(
  () => route.query.access_token || route.params.access_token
);
// const token = computed(
//   () => route.query.token || route.params.token
// );
const appId = computed(() => route.query.appid || route.params.appid);
const componentName = computed(
  () => route.query.componentName || route.params.componentName
);
const propsValues = ref({});
const currentComponent = ref(null);

watch(
  () => route,
  () => {
    load();
  },
  { deep: true }
);

// watch(
//   () => route.params,
//   () => {
//     load();
//   },
//   { deep: true }
// );

const load = async () => {
  if (thirdPartToken.value) {
    appUserStore.setThirdpartToken(thirdPartToken.value);
    appUserStore.setToken(thirdPartToken.value);
  }
  
  // if (token.value) {
  //   appUserStore.setToken(token.value);
  // }

  if (appId.value) {
    appUserStore.setAppId(appId.value);
  }
  propsValues.value = { ...route.query };
  currentComponent.value = dynamicCommponents[componentName.value];
};

onMounted(() => {
  load();
});
</script>

<template>
  <component :is="currentComponent" v-bind="propsValues" />
</template>

<style lang="less" scoped>
.layout-container-main {
  width: 100vw;
  height: 100vh;
  .el-main {
    padding: 10px;
  }
}
.el-menu--horizontal > .el-menu-item:nth-child(2) {
  margin-right: auto;
}
</style>
